<script setup lang="ts">
import SuccessIcon from "@/assets/images/success.png";
import FailIcon from "@/assets/images/fail.png";

const props = defineProps({
  isSuccess: Boolean
});
const emit = defineEmits(["handelBack"]);

const handelBack = (type:'login' | 'reset') => {
  emit("handelBack", type);
};
</script>

<template>
  <div>
    <template v-if="props.isSuccess">
      <div class="result-icon">
        <a-image :preview="false" :src="SuccessIcon" fit="cover" width="100%" height="100%" />
      </div>
      <div class="result-label">您的密码已重置成功！</div>
      <a-button class="login-btn" @click="handelBack('login')">返回登录</a-button>
    </template>
    <template v-else>
      <div class="result-icon">
        <a-image :preview="false" :src="FailIcon" fit="cover" width="100%" height="100%" />
      </div>
      <div class="result-label">很遗憾！密码重置失败~</div>
      <a-button class="login-btn" @click="handelBack('reset')">重新尝试</a-button>
    </template>
  </div>
</template>

<style scoped lang="scss">
@import "index.scss";
</style>
